import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import AvatarView from '../../AvatarView'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUserPlus } from '@fortawesome/free-solid-svg-icons'
import { UserService } from '../../../transfer/service/UserService'

interface IUserCardProps {
    data: any
    width: string
    minHeight: string
    maxHeight?: string
}

export default function UserCard(props: IUserCardProps) {
    const [imgList, setImgList] = useState<any>([])

    useEffect(() => {
        new UserService().getPictures(props.data.id, 0, 3).then(res => {
            setImgList(res.data.data)
        })
    }, [])

    useEffect(() => {
        // if (imgList != '') console.log('asd')
    }, [])
    return (
        <div
            className={style.container}
            style={{
                ['--width' as any]: props.width,
                ['--min-height' as any]: props.minHeight,
                ['--max-height' as any]: props.maxHeight
            }}>
            <div className={style.user__info}>
                <AvatarView width={'64px'} height={'64px'} img={'http://localhost:3000/' + props.data.profile.avatar} />
                <div className={style.info}>
                    <p>{props.data.profile.nickName}</p>
                    <span>@{props.data.username}</span>
                </div>
            </div>

            {imgList.length != 0 ? (
                <div className={style.img__list}>
                    {imgList.map((res: any) => {
                        return (
                            <div className={style.img}>
                                <img src={'http://localhost:3000/' + res.imageUrl} />
                            </div>
                        )
                    })}
                </div>
            ) : (
                ''
            )}
            <div className={style.btn}>
                <FontAwesomeIcon icon={faUserPlus} />
                <span>关注</span>
            </div>
        </div>
    )
}
